<template>
    <div class="white-box">
        <title-more title="短信发送记录" />
        <div class="sms-one">
            当前可用短信数量：<strong>{{ sms_nums }}</strong
            >条
            <el-button type="primary" size="small" @click="clickRecharge">立即充值</el-button>
            <!-- <el-popover placement="right" content="您好，暂不支持用户线上充值，请联系您的服务经理进行充值。" :width="280" trigger="click">
                <template #reference>
                    <el-button type="primary" size="small">立即充值</el-button>
                </template>
            </el-popover> -->
        </div>
        <div class="task-one" style="margin-bottom: 0; background: none; padding-left: 0">
            <div class="task-one__item">
                <el-input
                    placeholder="输入完整手机号"
                    v-model.trim="search_text"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    maxlength="11"
                    clearable
                ></el-input>
            </div>
            <div class="task-one__btn">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">查询</el-button>
            </div>
        </div>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="created_at_label" label="发送时间" width="180"></el-table-column>
            <el-table-column prop="mobile" label="手机号" width="140"> </el-table-column>
            <el-table-column label="短信内容" min-width="500">
                <template #default="{ row }">
                    <span>{{ row.content }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="split_count" label="计费数量" width="140"> </el-table-column>
            <el-table-column label="状态" width="80">
                <template #default="{ row }">
                    <span v-if="row.status == 0">发送中</span>
                    <span v-else>{{ row.status == 1 ? "成功" : "失败" }}</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { useRouter } from "vue-router"
import { Search } from "@element-plus/icons-vue"
import TitleMore from "@components/title-more.vue"
import GoBack from "@components/GoBack.vue"
import OneLoad from "@mixins/one-load"

const router = useRouter()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getSMSNums()
})

const sms_nums = ref(0)
function getSMSNums() {
    proxy.$axios
        .get("sms/capital")
        .then((res) => {
            if (res.data.code == 0) {
                sms_nums.value = res.data.data.remain
                getList()
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, search_text, pubParams, pubRefreshParams, getdata } = OneLoad()
pageSize.value = 20

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        mobile: search_text.value,
    }
    getdata("sms/smsLog", params)
}

const clickRecharge = () => {
    router.push("/Marketing/RechargeSMS")
}
</script>
<script>
export default {
    name: "SendRecord",
}
</script>

<style lang="less" scoped>
.sms-one {
    position: relative;
    min-height: 24px;
    padding: 15px 20px;
    background: @gray-1;
    overflow: hidden;
    border-radius: @radius-sm;
    margin-bottom: @margin-mdl;
    strong {
        color: @red;
        font-size: @line-height-lg;
        margin-right: @margin-base;
    }
    .el-button {
        margin-left: @margin-sm;
    }
}
</style>
